<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽上传示例</title>
    <style>
        .drop-zone {
            border: 2px dashed #ccc;
            width: 300px;
            min-height: 150px;
            text-align: center;
            line-height: 150px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<h2>拖拽上传示例</h2>

<div class="drop-zone" id="dropZone">
    拖拽文件或文件夹到此处上传<br>
    或点击选择文件<input type="file" id="fileInput" style="display: none;" multiple webkitdirectory directory>
</div>

<script>
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');

    dropZone.addEventListener('dragover', (event) => {
        event.preventDefault();
        dropZone.style.border = '2px dashed #aaa';
    });

    dropZone.addEventListener('dragleave', (event) => {
        event.preventDefault();
        dropZone.style.border = '2px dashed #ccc';
    });

    dropZone.addEventListener('drop', (event) => {
        event.preventDefault();
        dropZone.style.border = '2px dashed #ccc';

        const items = event.dataTransfer.items;
        const files = [];
        for (let i = 0; i < items.length; i++) {
            const entry = items[i].webkitGetAsEntry();
            if (entry.isFile) {
                files.push(items[i].getAsFile());
            } else if (entry.isDirectory) {
                traverseDirectory(entry);
            }
        }

        handleFiles(files);
    });

    dropZone.addEventListener('click', () => {
        fileInput.click();
    });

    fileInput.addEventListener('change', () => {
        const files = fileInput.files;
        handleFiles(files);
    });

    function traverseDirectory(directory) {
        const reader = directory.createReader();
        reader.readEntries((entries) => {
            entries.forEach((entry) => {
                if (entry.isFile) {
                    entry.file((file) => {
                        files.push(file);
                    });
                } else if (entry.isDirectory) {
                    traverseDirectory(entry);
                }
            });
        });
    }

    function handleFiles(files) {
        if (files.length > 0) {
            const formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append('files', files[i]);
            }

            fetch('/api/upload/drag-drop', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    console.log('Upload successful:', data);
                    alert('文件上传成功！');
                })
                .catch(error => {
                    console.error('Error uploading files:', error);
                    alert('文件上传失败！');
                });
        }
    }
</script>

</body>
</html>
